import React from 'react'
import IconList from './IconList'
import icons from './icons'

class IconPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = { icons }
  }
  handleSearchChange = (e) => {
    const text = e.target.value.trim()
    const filterIcons = icons.filter(([en, cn]) => {
      return en.indexOf(text) > -1 || cn.indexOf(text) > -1
    })
    this.setState({ icons: filterIcons })
  }

  render() {
    const { icons } = this.state
    return (
      <div className="container">
        <h1>搜索图标</h1>

        <div className="input-group mb-3">
          <input
            type="text"
            className="form-control form-control-lg"
            aria-label="Username"
            aria-describedby="basic-addon1"
            onChange={this.handleSearchChange}
          />
        </div>
        <IconList icons={icons} />
      </div>
    )
  }
}

export default IconPage
